<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 软件架构作业 </title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <style type="text/css">
    .slelectmohu{
      position: fixed;
      top: 17%;
      width: 12.5%;
      z-index: 99;
      left: 1.5%;
      border: 2px solid #efefef;
    }

    .school_typeul{
      position: absolute;
      height: 30%;
      width: 80%;
    }
    .first_university{
      position: absolute;
      height: 20%;
      width: 100%;
      top: 0%;
      left: 0%;
    }
    .first_disp{
      position: absolute;
      height: 20%;
      width: 100%;
      top: 22%;
      left: 0%;
    }

    .nef_university{
      position: absolute;
      height: 20%;
      width: 100%;
      top: 44%;
      left: 0%;
    }
    .too_university{
      position: absolute;
      height: 20%;
      width: 100%;
      top: 66%;
      left: 0%;
    }




    .school_prov{
      position: absolute;
      top: 50%;

    }



    .selectinput{
      position: absolute;
      left: 4%;
      width: 90%;
      height: 15%;
      top: 10%;
      background-color: white;
    }

    .selectbutton{
      position: absolute;
      width: 40%;
      height: 15%;
      left: 30%;
      top: 40%;
      background: #4285f4;
      color: white;
    }

    .selectfont{
      position: absolute;
      top: 70%;
      width: 100%;
      left: 5%;
    }


    ul{
      background: #f8f8f8;
    }

    .left_leftt{
      position: absolute;
      width: 100%;
      height: 100%;

    }


    li {
      list-style-type:none;
    }

    .center_table{
      border:1px solid #efefef;
      width: 100%;
      position: absolute;
    }


    .center_content{
      left: 17%;
      position: absolute;
      width: 79%;
      border: 2px solid #efefef;
      top: 8%;
    }

    .content{
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .left_table{
      position: absolute;
      left: 0%;
      width: 14%;
      height: 90%;
      top: 10%;
      border: 2px solid #efefef;
    }


    .title{
      position: absolute;
      top: 0%;
      width: 100%;
      left: -1%;
      height: 6%;
      background-color: lightblue;
    }


    .left_title{
      position: absolute;
      left: 0%;
      width: 40%;
    }

    .right_title{
      position: absolute;
      right: 5%;
    }

  </style>


</head>
<body>
<div id="content" class="content">
  <div id="title" class="title">
    <div id="righ_title" class="right_title">
      <font size="5" onclick="clickselectbyuniversity()">按高校查询&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font size="5" onclick="clickselectbyregion()">&nbsp;&nbsp;按地区查询</font>
    </div>
  </div>

  <div id="left_table" class="left_table" align="center">
    <div id="left_leftt" class="left_leftt">
      <li onclick="clickut()"><font size="5" class="school_type" >高校类型</font></li>
      <ul class="school_typeul" id="school_typeul" >

        <li class="first_university" id="first_university" onclick="loadtablebytype('first_university','一流大学')"><font size="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一流大学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></li>

        <li class="first_disp" id="first_disp" onclick="loadtablebytype('first_disp','一流学科')"><font size="3" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一流学科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></li>

        <li class="nef_university" id="nef_university" onclick="loadtablebytype('nef_university','985')"><font size="3" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;985高校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></li>

        <li class="too_university" id="too_university" onclick="loadtablebytype('too_university','211')"><font size="3" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;211高校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></li>

      </ul>

      <li onclick="loadallregion()" class="school_prov"><font size="5">所在地区</font></li>
      <ul class="loacationul" id="locationul">

      </ul>
    </div>
  </div>

  <div id="center_content" class="center_content">


  </div>

</div>

<!--模糊查询框-->
<div class="slelectmohu" id="selectmohu" hidden align="center">


</div>


</body>



<script>
  var static_regionhtml=$("#left_table").html();
  function clickselectbyregion(){
    var left_table=$("#left_table")
    left_table.empty();
    left_table.css("height","90%");
    left_table.html(static_regionhtml);
    loadcentertable()
  }



  function chosename(name){
    $("#selectinput").val(name);
    $("#selectmohu").hide();
  }

  function selectinputon(){
    var name=$("#selectinput").val();
    var str="";
    var selectmohu=$("#selectmohu")
    $.ajax({
      type: "post",
      url: "/finduniversitynamelike",
      data: {"name":name},
      async: false,
      success: function (data) {
        for(var i=0;i<data.length;i++){
          str+="<li onclick='chosename(\""+data[i].sname+"\")'><font>"+data[i].sname+"</font></li>"
        }
      }
    })
    selectmohu.html(str);
    selectmohu.show()
  }

  function clickselectbyuniversity(){
    var left_table=$("#left_table")
    static_regionhtml=left_table.html();
    left_table.empty();
    left_table.css("height","20%");
    var str=" <div id='left_leftt' class='left_leftt'>";
    str+="<input class='selectinput' id='selectinput' oninput='selectinputon()' >";
    str+="<button onclick='selectbyuniversitybyname()' class='selectbutton'>查询</button>"
    str+="<font class='selectfont'>请输入关键词并点击查询</font>"
    str+="</div>"
    left_table.html(str);
  }

  function selectbyuniversitybyname(){
    var name=$("#selectinput").val();
    var center_content=$("#center_content")
    var str="";

    str+="<table class='center_table' >"

    str+="<tr><th colspan='8' class='table_title'><li><font size='5'>全国普通高等学校名单</font></li></th></tr>"
    str+=" <tr><th>序号</th><th>学校标识码</th><th>学校名称</th><th>所在地区</th><th>所在城市</th><th>主管部门</th><th>办学层次</th><th>高校类型</th></tr>"

    $.ajax({
      type: "post",
      url: "/finduniversitybyname",
      data: {"name":name},
      async: false,
      success: function (data) {
        for(var i=0;i<data.length;i++){
          str+="<tr><th>"+(i+1)+"</th><th>"+data[i].scode+"</th><th>"+data[i].sname+"</th><th>"+data[i].sprovince+"</th><th>"+data[i].scity+"</th><th>"+data[i].sdepartment+"</th><th>"+data[i].slevel+"</th><th>"+data[i].sintroduce+"</th></tr>"
        }
      }
    })
    str+="</table>"

    center_content.html(str)
  }


  var regionlen=31;

  function loadallregion(){
    $("#school_typeul").hide()
    $("#left_table").css("height","80%");

    var locationul=$("#locationul")
    var str="";
    $.ajax({
      type: "post",
      url: "/findprovice",
      data: {},
      async: false,
      success: function (data) {
        regionlen=data.length;
        //  alert(data)
        for(var i=0;i<data.length;i++){
          str+="<li class='' onclick='loaduniversitybyregion(\""+i+1+"\",\""+data[i]+"\")'  id='region"+i+1+"' onclick=''><font size='3'>"+data[i]+"</font></li>"
        }
      }
    })
    locationul.html(str)
    locationul.show();
    loaduniversitybyregion("1","北京市");
  }

  function loaduniversitybyregion(id,word){

    for (var i=1;i<1000;i++){
      $("#region"+i+"").css("background-color","#f8f8f8");
    }
    $("#region"+id+"").css("background-color","lightblue");

    loaduniversitybyrword(word);

  }

  function loaduniversitybyrword(word){
    var center_content=$("#center_content")
    var str="";

    str+="<table class='center_table' >"

    str+="<tr><th colspan='8' class='table_title'><li><font size='5'>"+word+"</font></li></th></tr>"
    str+=" <tr><th>序号</th><th>学校标识码</th><th>学校名称</th><th>所在地区</th><th>所在城市</th><th>主管部门</th><th>办学层次</th><th>高校类型</th></tr>"

    $.ajax({
      type: "post",
      url: "/finduniversityby",
      data: {"region":word},
      async: false,
      success: function (data) {
        //  alert(data)
        for(var i=0;i<data.length;i++){
          str+="<tr><th>"+(i+1)+"</th><th>"+data[i].scode+"</th><th>"+data[i].sname+"</th><th>"+data[i].sprovince+"</th><th>"+data[i].scity+"</th><th>"+data[i].sdepartment+"</th><th>"+data[i].slevel+"</th><th>"+data[i].sintroduce+"</th></tr>"
        }
      }
    })
    str+="</table>"

    center_content.html(str)

  }


  function clickut(){

    $("#locationul").hide();

    $("#school_typeul").show();
    loadtablebytype("first_university","一流大学")
  }


  window.onload =function () {
    loadcentertable();
  }

  function loadtablebyword(word){
    var center_content=$("#center_content")
    var str="";

    str+="<table class='center_table' >"
    if(word=="985"||word=="211"){
      str+="<tr><th colspan='8' class='table_title'><li><font size='5'>"+word+"高校</font></li></th></tr>"
    }else {
      str+="<tr><th colspan='8' class='table_title'><li><font size='5'>"+word+"</font></li></th></tr>"
    }
    str+=" <tr><th>序号</th><th>学校标识码</th><th>学校名称</th><th>所在地区</th><th>所在城市</th><th>主管部门</th><th>办学层次</th><th>高校类型</th></tr>"

    $.ajax({
      type: "post",
      url: "/findfirstuniversity",
      data: {"word":word},
      async: false,
      success: function (data) {
        //  alert(data)
        for(var i=0;i<data.length;i++){
          str+="<tr><th>"+(i+1)+"</th><th>"+data[i].scode+"</th><th>"+data[i].sname+"</th><th>"+data[i].sprovince+"</th><th>"+data[i].scity+"</th><th>"+data[i].sdepartment+"</th><th>"+data[i].slevel+"</th><th>"+data[i].sintroduce+"</th></tr>"
        }
      }
    })
    str+="</table>"

    center_content.html(str)
  }

  function loadtablebytype(id,word){
    $("#first_university").css("background-color","#f8f8f8");
    $("#first_disp").css("background-color","#f8f8f8");
    $("#nef_university").css("background-color","#f8f8f8");
    $("#too_university").css("background-color","#f8f8f8");
    $("#"+id+"").css("background-color","lightblue");
    loadtablebyword(word);
  }


  function  loadcentertable(){
    $("#first_university").css("background-color","lightblue");
    loadtablebyword("一流大学")
  }

</script>

</html>
